<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>图片加水印</title>
<style>
:root {
  --main-color: #4a90e2;
  --main-color-hover: #357abd;
}
body {
  font-family: "Segoe UI","PingFang SC",sans-serif;
  background:#f7f9fc;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}
h2 {
  margin:40px 0 20px;
  color:#333;
}
.form-box {
  background:#fff;
  padding:20px 30px;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
  max-width:420px;
  width:90%;
  margin-bottom:30px;
}
.form-item {
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
}
label {
  font-weight:600;
  margin-bottom:6px;
  color:#444;
}
.file-btn,
button {
  background:var(--main-color);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-size:16px;
  cursor:pointer;
  transition:background .2s;
  width:100%;
  text-align:center;
}
.file-btn:hover,
button:hover {
  background:var(--main-color-hover);
}
#fileInput { display:none; }
input[type="text"] {
  padding:8px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
  transition:border .2s;
}
input[type="text"]:focus { border-color:var(--main-color); outline:none; }

#preview-box {
  position:relative;
  display:inline-block;
  max-width:90%;
  margin-top:20px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
  background:#fafafa;
}
#preview-box img { max-width:100%; height:auto; display:block; }
#preview-box .watermark {
  position:absolute;
  right:16px;
  bottom:16px;
  color:rgba(255,255,255,0.95);
  font-size:18px;
  font-weight:600;
  text-shadow:0 0 4px rgba(0,0,0,0.7);
  pointer-events:none;
  user-select:none;
}

#result-mask {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.85);
  z-index:999;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(3px);
  flex-direction:column;
}
#result-mask img {
  max-width:92%;
  max-height:80%;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
}
#loading-text {
  color:#fff;
  font-size:20px;
  font-weight:600;
  margin-bottom:12px;
  text-align:center;
}

/* 小关闭按钮文字版，顶部右上角 */
#close-btn {
  position:absolute;
  top:12px;
  width: 200px !important;
  margin-right: -100px;
  right: 50%;
  background:rgba(255,255,255,0.9);
  color:#333;
  border:none;
  border-radius:4px;
  padding:4px 10px;
  font-size:14px;
  cursor:pointer;
  line-height:1;
  font-weight:600;
  transition:background .2s;
  z-index:1000;
}
#close-btn:hover { background:rgba(255,255,255,1); }
</style>
</head>
<body>

<h2>图片加水印</h2>

<div class="form-box">
  <div class="form-item">
    <label>选择图片：</label>
    <button class="file-btn" id="fileBtn">选择图片</button>
    <input type="file" id="fileInput" accept="image/*">
  </div>
  <div class="form-item">
    <label>水印内容：</label>
    <input type="text" id="watermarkText" placeholder="请输入水印内容">
  </div>
  <button id="saveBtn">生成合成图</button>
</div>

<div id="preview-box">
  <div class="watermark" id="wmText"></div>
</div>

<!-- 结果弹窗 -->
<div id="result-mask">
  <button id="close-btn">关闭</button>
  <div id="loading-text">生成中...</div>
  <img id="result-img">
</div>

<script>
(function(){
  const fileBtn     = document.getElementById('fileBtn');
  const fileInput   = document.getElementById('fileInput');
  const watermarkIn = document.getElementById('watermarkText');
  const previewBox  = document.getElementById('preview-box');
  const wmText      = document.getElementById('wmText');
  const saveBtn     = document.getElementById('saveBtn');
  const mask        = document.getElementById('result-mask');
  const resultImg   = document.getElementById('result-img');
  const loadingText = document.getElementById('loading-text');
  const closeBtn    = document.getElementById('close-btn');

  // 点击按钮触发文件选择
  fileBtn.addEventListener('click', () => fileInput.click());

  // 默认水印为当前时间
  function getNowString() {
    const d = new Date();
    const pad = n => n.toString().padStart(2,'0');
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} `
         + `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  }
  watermarkIn.value = getNowString();
  wmText.textContent = watermarkIn.value;

  let originalImg = null;
  fileInput.addEventListener('change', e => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      if (!originalImg) {
        originalImg = document.createElement('img');
        previewBox.insertBefore(originalImg, wmText);
      }
      originalImg.src = ev.target.result;
    };
    reader.readAsDataURL(file);
  });

  watermarkIn.addEventListener('input', () => {
    wmText.textContent = watermarkIn.value;
  });

  saveBtn.addEventListener('click', () => {
    if (!originalImg || !originalImg.complete) {
      alert('请先选择图片');
      return;
    }

    mask.style.display = 'flex';
    loadingText.textContent = '生成中...';

    setTimeout(() => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width  = originalImg.naturalWidth;
      canvas.height = originalImg.naturalHeight;

      ctx.drawImage(originalImg, 0, 0);

      const text = watermarkIn.value;
      if (text) {
        const fontSize = Math.floor(canvas.width * 0.04);
        ctx.font = `600 ${fontSize}px "Segoe UI",sans-serif`;
        ctx.fillStyle = 'rgba(255,255,255,0.95)';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';
        ctx.strokeStyle = 'rgba(0,0,0,0.6)';
        ctx.lineWidth = 3;
        ctx.strokeText(text, canvas.width - 30, canvas.height - 30);
        ctx.fillText(text, canvas.width - 30, canvas.height - 30);
      }

      resultImg.src = canvas.toDataURL('image/png');
      loadingText.textContent = '长按图片保存到相册';
    }, 200);
  });

  closeBtn.addEventListener('click', () => {
    mask.style.display = 'none';
  });
})();
</script>
</body>
</html>
